<script setup lang='ts'>
import { onMounted } from 'vue';
// 定义接受props参数
// Vue 3.5+的版本的用法  这种简单
// const {age=2,name='dada'}=defineProps<{  //const后面括号里为默认值，不传的情况下显示
//     name?: string 
//     age?: number
// }>()

// Vue 3.5以下的默认值的设置方式
const props = withDefaults(
  defineProps<{ name: string, age: number }>(),
  {
    name: "默认值",
    age: 100
  }
 ) 
const test = () => {
  // 这里面拿到的是最新的传递过来的数据    
  console.log(props.name, props.age)
}
onMounted(() => {
  test()
})


</script>

<template>
  <div>
    <h2>子组件显示父组件传递的数据</h2>
    <p>接受的姓名：{{ name }}</p>
    <p>接受的年龄：{{ age }}</p>
  </div>
</template>

<style scoped></style>